<template>
   <!-- 后台管理模版模块父组件 -->
  <div class="template">
    <SliderNavbar :datas="datas" >
      <template #top>
        <div class="top-content">
          <PublicNavBar
              :items="navbarList"
              direction="horizontal"
              :horizontalWidth="horizontalWidth"
              @handleItemClick="navbarClick"
              :activeIndex="activeNavbarIndex"
              :itemSpacingArray="[0, 40, 40, 40]"
            />
        </div>
      </template>
    </SliderNavbar>
  </div>
</template>

<script>
// / 引用公共的导航栏组件
import PublicNavBar from "@/components/public/NavBar";
export default {
  name: "templateIndex",
  props: {
    datas: Object,
  },
  inject: ["reload"],
  components: {
    PublicNavBar,
  },
  data() {
    return {
      activeIndex: 0,
      activeNavbarIndex: 0,
      horizontalWidth: "63%",
      navbarList: [
        { label: "模版中心", path: "" },
        { label: "我的模版", path: "" },
      ],
      templateData: {},
    };
  },

  mounted() {
    this.handleResponse();
  },

  methods: {
      // 顶部导航栏切换回调
      navbarClick(obj) {
      this.activeNavbarIndex = obj.index;
      this.horizontalWidth = obj.index == 0 ? "63%" : "73%";
      console.log("打印", obj);
    },
    // 处理响应
    handleResponse() {
      // 调用后台首页数据API
      this.$api.admin.home.getHomeDataAPI({
        appid: 'fcadf3fd073944faa7cf189fd7c198e4',
        phonenumber:'15201611813'
      }).then((res) => {
        // this.templateData = res.data.data;
        console.log("模版组件接收的数据--------------", res);

        // 处理响应
      });
    },
  },

  watch: {},
};
</script>

<style lang="scss" scoped>
.template {
  width: 100%;
  height: 100%;
}
.top-content{
  display: flex;
  justify-content: center;
  width: 60%;
  margin: 0 auto;
}

</style>
